
import { NodeView, INode } from "./Node";
import type { NodeGraphViewRenderContext } from "./NodeGraphViewRenderContext";
import { NodeViewContext } from "./NodeViewContext";
import { NodeViewReportContext } from "./NodeViewReportContext";
import Port, { PortDirection, PortView } from "./elements/Port";
import { PortGroupView } from "./elements/PortGroup";
import Text from "./elements/Text";
import React, { useContext } from "react";

export class DataNode implements INode {
    description: string;

    constructor(description: string) {
        this.description = description;
    }

    render(ctx: NodeGraphViewRenderContext) {
        return (
            <DataNodeView dataNode={this}></DataNodeView>
        )
    }
}

export function DataNodeView({dataNode}: {dataNode: DataNode}){
    let vctx = useContext(NodeViewContext);

    return (
    <>
        <NodeView> 
                <Text>{dataNode.description}</Text>
                <Text>{dataNode.description}</Text>
                <PortGroupView>
                    <PortView data={new Port(0, 'Hello', PortDirection.OUT)}></PortView>
                    <PortView data={new Port(0, 'Hello', PortDirection.IN)}></PortView>
                    <PortView data={new Port(0, 'Hello', PortDirection.IN)}></PortView>
                    <PortView data={new Port(0, 'Hello', PortDirection.IN)}></PortView>
                </PortGroupView>
        </NodeView>
    </>
    )
}
